<template>
  <el-dialog
    top="30px"
    width="800px"
    title="公示反馈"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <el-form
      label-width="100px"
      ref="form"
      :model="formParams"
      :rules="formRules"
      v-if="!isViewMode"
    >
      <el-form-item label="公示状态" prop="is_normal">
        <c-radio-group v-model="formParams.is_normal" :options="normalOptions"></c-radio-group>
      </el-form-item>
      <el-form-item label="公示反馈" prop="public_content">
        <el-input v-model="formParams.public_content" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" :loading="saveLoading" @click="handlePublicSubmit">
          提交公示
        </el-button>
      </el-form-item>
    </el-form>

    <div class="d-flex mb-3 justify-content-between">
      <span class="font-weight-bold">公示登记：</span>
      <el-button type="text" class="p-0" @click="getData()">
        <i class="fa fa-refresh"></i>
      </el-button>
    </div>

    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      empty-text="没有公示登记记录"
    ></c-table>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
const TABLE_NAME = 'datum_customer_public_register'

export default {
  components: {},
  props: {
    visible: Boolean,
    viewMode: Boolean,
    relatedData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '时间', prop: 'create_time', align: 'center' } },
        { attrs: { label: '操作用户', prop: 'submit_person_name', align: 'center' } },
        { attrs: { label: '记录', prop: 'public_content', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            { content: '编辑', icon: 'fa fa-edit', event: this.handlePublicEdit },
            { content: '删除', icon: 'fa fa-trash', event: this.handlePublicDelete },
          ],
        },
      ],

      formParams: {
        is_normal: '1',
        public_content: '',
      },
      normalOptions: {
        0: '异常',
        1: '正常',
      },
      saveLoading: false,
      formRules: {
        public_content: [{ required: true, message: '请输入公示反馈', trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapGetters(['user']),
    isViewMode() {
      return this.viewMode || +this.relatedData.publicStatus > 1
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.getData()
      },
      deep: true,
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    async getData() {
      if (!this.relatedData.customer_related_id) {
        return
      }

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(
          this.$serviceName,
          TABLE_NAME,
          {
            'customer_related_id.eq': this.relatedData.customer_related_id,
          },
          { create_time: 'desc' }
        )
      )
      this.loading = false

      this.tableData = Object.freeze((res && res.data) || [])
    },
    handlePublicEdit() {},
    handlePublicDelete(row) {
      this.$utils
        .msgbox({
          message: `确定删除?`,
          type: 'warning',
          beforeClose: () => this.$api.deleteData(this.$serviceName, TABLE_NAME, row.id),
        })
        .then(() => {
          this.$message.success('删除成功！')
          this.getData()
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
    async handlePublicSubmit() {
      await this.$refs.form.validate()

      this.saveLoading = true
      const [res] = await this.$utils.promise(
        this.$api.addData(this.$serviceName, TABLE_NAME, {
          customer_id: this.relatedData.customer_id,
          customer_related_id: this.relatedData.customer_related_id,
          lender_idcard: this.relatedData.lender_idcard,
          is_normal: this.formParams.is_normal,
          public_content: this.formParams.public_content,
          submit_type: 1,
          submit_person: this.user.userId,
          submit_person_name: this.user.realName || '',
          update_person: this.user.userId,
        })
      )
      this.saveLoading = false

      if (!res) {
        return this.$message.error('提交失败，请重试！')
      }
      this.$message.success('提交成功')
      this.getData()
    },
  },
}
</script>
<style lang="scss" scoped></style>
